<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css">

<script class="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"blog.tabcen.top","root":"/","images":"/images","scheme":"Pisces","version":"8.3.0","exturl":false,"sidebar":{"position":"left","display":"always","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}};
  </script>
<meta name="description" content="今日而言治术，则莫若综合名实；今日而言学术，则莫若取笃实践履之士。物穷则变，救浮华者莫若质。积翫之后，振之以猛，意在斯乎！">
<meta property="og:type" content="website">
<meta property="og:title" content="TabCen&#39;s Blog">
<meta property="og:url" content="http://blog.tabcen.top/index.html">
<meta property="og:site_name" content="TabCen&#39;s Blog">
<meta property="og:description" content="今日而言治术，则莫若综合名实；今日而言学术，则莫若取笃实践履之士。物穷则变，救浮华者莫若质。积翫之后，振之以猛，意在斯乎！">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="TabCen">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="http://blog.tabcen.top/">


<script class="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : true,
    isPost : false,
    lang   : 'zh-CN'
  };
</script>
<title>TabCen's Blog</title>
  




  <noscript>
  <style>
  body { margin-top: 2rem; }

  .use-motion .menu-item,
  .use-motion .sidebar,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header {
    visibility: visible;
  }

  .use-motion .header,
  .use-motion .site-brand-container .toggle,
  .use-motion .footer { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle,
  .use-motion .custom-logo-image {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line {
    transform: scaleX(1);
  }

  .search-pop-overlay, .sidebar-nav { display: none; }
  .sidebar-panel { display: block; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">TabCen's Blog</h1>
      <i class="logo-line"></i>
    </a>
      <p class="site-subtitle" itemprop="description">记录自己的学习过程</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu">
        <li class="menu-item menu-item-home"><a href="/" rel="section">首页</a></li>
        <li class="menu-item menu-item-前端"><a href="/categories/%E5%89%8D%E7%AB%AF/" rel="section">前端</a></li>
        <li class="menu-item menu-item-ios"><a href="/categories/iOS/" rel="section">iOS</a></li>
        <li class="menu-item menu-item-感想"><a href="/categories/%E6%84%9F%E6%83%B3/" rel="section">感想</a></li>
        <li class="menu-item menu-item-游戏"><a href="/categories/%E6%B8%B8%E6%88%8F/" rel="section">游戏</a></li>
        <li class="menu-item menu-item-archives"><a href="/archives/" rel="section">归档</a></li>
        <li class="menu-item menu-item-tags"><a href="/tags/" rel="section">标签</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger">搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-overview-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">TabCen</p>
  <div class="site-description" itemprop="description">今日而言治术，则莫若综合名实；今日而言学术，则莫若取笃实践履之士。物穷则变，救浮华者莫若质。积翫之后，振之以猛，意在斯乎！</div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">12</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
        <span class="site-state-item-count">6</span>
        <span class="site-state-item-name">分类</span>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">8</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author site-overview-item animated">
      <span class="links-of-author-item">
        <a href="https://github.com/TabCen" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;TabCen" rel="noopener" target="_blank"><i class="github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:964267617@qq.com" title="E-Mail → mailto:964267617@qq.com" rel="noopener" target="_blank"><i class="envelope fa-fw"></i>E-Mail</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://weibo.com/tabcen" title="Weibo → https:&#x2F;&#x2F;weibo.com&#x2F;tabcen" rel="noopener" target="_blank"><i class="weibo fa-fw"></i>Weibo</a>
      </span>
  </div>



        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner index posts-expand">

    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://blog.tabcen.top/2020/06/28/%E5%89%8D%E7%AB%AF/20200628-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E5%92%8C%E7%9B%B8%E5%AF%B9%E5%AE%9A%E4%BD%8D%E6%80%A7%E8%83%BD%E8%A7%82%E5%AF%9F%E5%AF%B9%E6%AF%94%E5%AE%9E%E8%B7%B5%E8%AE%B0%E5%BD%95/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="TabCen">
      <meta itemprop="description" content="今日而言治术，则莫若综合名实；今日而言学术，则莫若取笃实践履之士。物穷则变，救浮华者莫若质。积翫之后，振之以猛，意在斯乎！">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="TabCen's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/06/28/%E5%89%8D%E7%AB%AF/20200628-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E5%92%8C%E7%9B%B8%E5%AF%B9%E5%AE%9A%E4%BD%8D%E6%80%A7%E8%83%BD%E8%A7%82%E5%AF%9F%E5%AF%B9%E6%AF%94%E5%AE%9E%E8%B7%B5%E8%AE%B0%E5%BD%95/" class="post-title-link" itemprop="url">绝对定位和相对定位性能对比实践记录</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-06-28 11:03:55" itemprop="dateCreated datePublished" datetime="2020-06-28T11:03:55+08:00">2020-06-28</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2021-04-21 21:14:12" itemprop="dateModified" datetime="2021-04-21T21:14:12+08:00">2021-04-21</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <blockquote>
<p>目标: 通过 <code>Chrome DevTools</code> 来熟悉了解浏览器渲染页面过程，以及一些布局的性能对比</p>
</blockquote>
<h2 id="一、准备"><a href="#一、准备" class="headerlink" title="一、准备"></a>一、准备</h2><ul>
<li>1、工具 <code>Chrome DevTools</code> 中 <code>Performance</code> (原Timeline)<a target="_blank" rel="noopener" href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool?hl=zh_cn">工具使用介绍</a></li>
<li>2、用来测试代码 <a href="./../code/web/index.html">index.html</a></li>
</ul>
<p>html代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;block1&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 中间省略 998个&lt;div class=&quot;block1&quot;&gt;&lt;/div&gt; --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;block1&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>css 样式一</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.block1</span>&#123;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid blue;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>css 样式二</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.block1</span>&#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0px</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid blue;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="二、查看Performance"><a href="#二、查看Performance" class="headerlink" title="二、查看Performance"></a>二、查看Performance</h2><p><img src="./../image/performance.png" alt="performance.png"></p>
<h3 id="观察Main"><a href="#观察Main" class="headerlink" title="观察Main"></a>观察<code>Main</code></h3><p><img src="./../image/performance-main.png" alt="performance-main.png"></p>
<h3 id="从图中发现浏览器展示网页的几个阶段："><a href="#从图中发现浏览器展示网页的几个阶段：" class="headerlink" title="从图中发现浏览器展示网页的几个阶段："></a>从图中发现浏览器展示网页的几个阶段：</h3><ul>
<li>解析 HTML 阶段 （Parse HTML）<ul>
<li>样式计算  (Recalculate Style)</li>
</ul>
</li>
<li>布局阶段 (Layout)</li>
<li>更新图层树阶段 (Updata Layer Tree)</li>
<li>图层绘制阶段 (Paint)</li>
</ul>
<p>（这里不细说每个步骤都做了什么，若想研究，可另翻源码啃读）</p>
<h2 id="三、对比布局在这几个阶段的时间消耗"><a href="#三、对比布局在这几个阶段的时间消耗" class="headerlink" title="三、对比布局在这几个阶段的时间消耗"></a>三、对比布局在这几个阶段的时间消耗</h2><p>对比结果如下：</p>
<p><img src="./../image/performance-contrast.png" alt="performance-contrast.png"></p>
<p>从几组数据对比发现，绝对定位在布局阶段耗用的时间明显比相对定位要长。<br>（有兴趣可以扩大数据进行对比）</p>
<h2 id="四、总结"><a href="#四、总结" class="headerlink" title="四、总结"></a>四、总结</h2><p>思维的转变：<br>之前一直认为，前端的布局和iOS一样，直接设置位置会是渲染效率最高的方案。实验结果发现，绝对定位消耗时间更长，效率并不高<br>如何深层次研究：<br>个人认为，这里只是浅尝辄止。犹如只说“一个是脱离文档流了”罢了。具体原因待研究低层源码</p>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://blog.tabcen.top/2020/05/18/%E6%B8%B8%E6%88%8F/20200518-cocos%E5%B0%8F%E6%B8%B8%E6%88%8F%E5%BC%80%E5%8F%91%E7%B3%BB%E5%88%97%E4%B8%89/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="TabCen">
      <meta itemprop="description" content="今日而言治术，则莫若综合名实；今日而言学术，则莫若取笃实践履之士。物穷则变，救浮华者莫若质。积翫之后，振之以猛，意在斯乎！">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="TabCen's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/05/18/%E6%B8%B8%E6%88%8F/20200518-cocos%E5%B0%8F%E6%B8%B8%E6%88%8F%E5%BC%80%E5%8F%91%E7%B3%BB%E5%88%97%E4%B8%89/" class="post-title-link" itemprop="url">20200518-cocos小游戏开发系列三</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-05-18 17:14:07" itemprop="dateCreated datePublished" datetime="2020-05-18T17:14:07+08:00">2020-05-18</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2021-04-21 21:14:12" itemprop="dateModified" datetime="2021-04-21T21:14:12+08:00">2021-04-21</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E6%B8%B8%E6%88%8F/" itemprop="url" rel="index"><span itemprop="name">游戏</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <blockquote>
<p>cocos开发小游戏过程中，由于发布平台的不同，可能需要对不同平台做兼容处理。本文就是介绍如何采用<code>简单工厂模式</code>实现平台兼容。<br>同时，可以在开发过程中快速浏览页面效果，无须构建到不同平台再用各种平台IDE进行查看页面；极大得提升了工作效率。</p>
</blockquote>
<ul>
<li>构建平台：浏览器、微信小程序</li>
<li>语言：TS （由于TS具有类型检测，以及通用的面向对象编程方式）</li>
</ul>
<h2 id="设计接口-platformInterface-ts"><a href="#设计接口-platformInterface-ts" class="headerlink" title="设计接口 platformInterface.ts"></a>设计接口 platformInterface.ts</h2><ul>
<li>在微信小游戏环境中，可以直接调用 wx.showToast()来创建一个弹框。如果直接在业务代码中直接调用wx.showToast()在浏览器中必然报错。’wx’ is not defined,所以。先抽出一个公用接口，里面是一些常用的功能方法声明。</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">interface</span> PlatformInterface &#123;</span><br><span class="line">  showToast(<span class="built_in">object</span>?: <span class="built_in">Object</span>): <span class="built_in">void</span>;</span><br><span class="line">  showModal(<span class="built_in">object</span>?: <span class="built_in">Object</span>): <span class="built_in">void</span>;</span><br><span class="line">  showLoading(<span class="built_in">object</span>?: <span class="built_in">Object</span>): <span class="built_in">void</span>;</span><br><span class="line">  hideLoading(<span class="built_in">object</span>?: <span class="built_in">Object</span>): <span class="built_in">void</span>;</span><br><span class="line">  hideToast(<span class="built_in">object</span>?: <span class="built_in">Object</span>): <span class="built_in">void</span>;</span><br><span class="line">  showActionSheet(<span class="built_in">object</span>?: <span class="built_in">Object</span>): <span class="built_in">void</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="构建不同平台的实现类"><a href="#构建不同平台的实现类" class="headerlink" title="构建不同平台的实现类"></a>构建不同平台的实现类</h2><p>** 注意 ** ： 在ts中如果没有声明<code>wx</code>直接调用wx方法会报错。编译失败。所以，创建一个文件使用declare告诉编译器 “<code>wx</code>是存在的”</p>
<h3 id="首先定义-wx"><a href="#首先定义-wx" class="headerlink" title="首先定义 wx"></a>首先定义 <code>wx</code></h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在 wx.d.ts 文件中声明wx对象。</span></span><br><span class="line"><span class="keyword">declare</span> <span class="keyword">var</span> wx;</span><br></pre></td></tr></table></figure>

<h3 id="PlatformWx-ts中"><a href="#PlatformWx-ts中" class="headerlink" title="PlatformWx.ts中"></a>PlatformWx.ts中</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> PlatformInterface <span class="keyword">from</span> <span class="string">&quot;./platformInterface&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">PlatformWx</span> <span class="title">implements</span> <span class="title">PlatformInterface</span></span>&#123;</span><br><span class="line">  <span class="comment">//MARK : PlatformInterface</span></span><br><span class="line">  showToast(<span class="built_in">object</span>): <span class="built_in">void</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;showToast&quot;</span>,wx);</span><br><span class="line">    wx.showToast(<span class="built_in">object</span>) <span class="comment">// 此处注意 在ts中如果未定义wx 此处会报错。所以</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="PlatformWeb-ts中"><a href="#PlatformWeb-ts中" class="headerlink" title="PlatformWeb.ts中"></a>PlatformWeb.ts中</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> PlatformInterface <span class="keyword">from</span> <span class="string">&quot;./platformInterface&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">PlatformWeb</span> <span class="title">implements</span> <span class="title">PlatformInterface</span> </span>&#123;</span><br><span class="line">  <span class="comment">//MARK : PlatformInterface</span></span><br><span class="line">  <span class="function"><span class="title">showToast</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;____web&quot;</span>);</span><br><span class="line">    alert(<span class="string">&quot;__web&quot;</span>);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="定义实现对象cg"><a href="#定义实现对象cg" class="headerlink" title="定义实现对象cg"></a>定义实现对象<code>cg</code></h2><p>最后根据不同的环境声明不同的实现方法</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> PlatformWeb <span class="keyword">from</span> <span class="string">&quot;./_web&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> PlatformWx <span class="keyword">from</span> <span class="string">&quot;./_wx&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> PlatformInterface <span class="keyword">from</span> <span class="string">&quot;./platformInterface&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> cg: PlatformInterface = <span class="literal">null</span>;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;env&#x27;</span>,cc.sys.browserType);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;wx&#x27;</span>,cc.sys.BROWSER_TYPE_WECHAT_GAME);</span><br><span class="line"></span><br><span class="line"><span class="keyword">switch</span> (cc.sys.browserType) &#123;</span><br><span class="line">  <span class="keyword">case</span> cc.sys.BROWSER_TYPE_WECHAT_GAME:&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;当前环境 wxgame&#x27;</span>)</span><br><span class="line">    cg = <span class="keyword">new</span> PlatformWx()</span><br><span class="line">  &#125;<span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">default</span>:&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;当前环境 webgame&#x27;</span>)</span><br><span class="line">    cg = <span class="keyword">new</span> PlatformWeb()</span><br><span class="line">  &#125;<span class="keyword">break</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> cg;</span><br></pre></td></tr></table></figure>

<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>此处采用<code>简单工厂模式</code>处理类不同的实现逻辑。可提高代码的扩展性。如果后期需要加不同的平台，只需要再创建一个平台类实现了PlatformInterface就可以了。<br>类似的需求还有：</p>
<ul>
<li>网络请求封装</li>
<li>数据存储逻辑封装</li>
</ul>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://blog.tabcen.top/2020/05/10/%E6%B8%B8%E6%88%8F/20200510-cocos%E5%B0%8F%E6%B8%B8%E6%88%8F%E5%BC%80%E5%8F%91%E7%B3%BB%E5%88%97%E4%BA%8C/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="TabCen">
      <meta itemprop="description" content="今日而言治术，则莫若综合名实；今日而言学术，则莫若取笃实践履之士。物穷则变，救浮华者莫若质。积翫之后，振之以猛，意在斯乎！">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="TabCen's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/05/10/%E6%B8%B8%E6%88%8F/20200510-cocos%E5%B0%8F%E6%B8%B8%E6%88%8F%E5%BC%80%E5%8F%91%E7%B3%BB%E5%88%97%E4%BA%8C/" class="post-title-link" itemprop="url">20200510-cocos小游戏系列二</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-05-10 23:36:32" itemprop="dateCreated datePublished" datetime="2020-05-10T23:36:32+08:00">2020-05-10</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2021-04-21 21:14:12" itemprop="dateModified" datetime="2021-04-21T21:14:12+08:00">2021-04-21</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E6%B8%B8%E6%88%8F/" itemprop="url" rel="index"><span itemprop="name">游戏</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <blockquote>
<p>本篇介绍我设计的游戏页面基类BaseScene。用来虚拟一个页面栈，以及模拟一个onshow方法。</p>
</blockquote>
<ul>
<li>cocos只允许同时渲染一个场景,构建一个页面栈就非常必要</li>
<li>一个场景只有onLoad()和start()两个生命周期方法。页面再次渲染时无 onShow()</li>
</ul>
<h2 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h2><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> sceneStack: <span class="built_in">Array</span>&lt;cc.Node&gt; = [];</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">BaseScene</span> <span class="keyword">extends</span> <span class="title">cc</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="comment">// 主导演</span></span><br><span class="line">  <span class="keyword">public</span> director: cc.Director = cc.director;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">public</span> sceneStack = sceneStack;</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="title">onDestroy</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;***********&quot;</span>,<span class="built_in">this</span>.name,<span class="string">&quot; onDestroy ************&quot;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  <span class="comment">/**</span></span><br><span class="line"><span class="comment">   * 模拟的生命周期方法</span></span><br><span class="line"><span class="comment">  */</span></span><br><span class="line">  <span class="function"><span class="title">onShowFromStack</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;onShowFromStack 子类重写&quot;</span>);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">/**</span></span><br><span class="line"><span class="comment">   * pushScene &amp; popScene 配合使用</span></span><br><span class="line"><span class="comment">   * <span class="doctag">@param </span>scene 需要push的场景名</span></span><br><span class="line"><span class="comment">   * <span class="doctag">@param </span>onLaunched 场景加载完成后的回调方法</span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line">  <span class="function"><span class="title">pushScene</span>(<span class="params">scene: <span class="built_in">string</span>, onLaunched?: <span class="built_in">Function</span></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;pushScene&quot;</span>);</span><br><span class="line">    cc.game.addPersistRootNode(<span class="built_in">this</span>.node);</span><br><span class="line">    <span class="built_in">this</span>.sceneStack.push(<span class="built_in">this</span>.node);</span><br><span class="line">    <span class="built_in">this</span>.director.loadScene(scene, <span class="function">(<span class="params">options</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">this</span>.node.active = <span class="literal">false</span>;</span><br><span class="line">      <span class="comment">//打印</span></span><br><span class="line">      <span class="comment">// printStack()</span></span><br><span class="line">      onLaunched &amp;&amp; onLaunched(options);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">/**</span></span><br><span class="line"><span class="comment">   * popScene &amp; pushScene</span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line">  <span class="function"><span class="title">popScene</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> node = <span class="built_in">this</span>.sceneStack.pop();</span><br><span class="line">    node.active = <span class="literal">true</span>;</span><br><span class="line">    node.getComponent(<span class="string">&#x27;BaseScene&#x27;</span>).onShowFromStack()</span><br><span class="line">    cc.game.removePersistRootNode(node);</span><br><span class="line">    <span class="built_in">this</span>.node.destroy()</span><br><span class="line">    <span class="built_in">this</span>.destroy()</span><br><span class="line">    <span class="comment">//打印</span></span><br><span class="line">    <span class="comment">// printStack()</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">/**</span></span><br><span class="line"><span class="comment">   * 替换Scene</span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line">  <span class="function"><span class="title">replaceScene</span>(<span class="params">scene: <span class="built_in">string</span>, onLaunched?: <span class="built_in">Function</span></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.director.loadScene(scene, <span class="function">(<span class="params">options</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">//打印</span></span><br><span class="line">      <span class="comment">// printStack()</span></span><br><span class="line">      onLaunched &amp;&amp; onLaunched(options);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h2 id="解读"><a href="#解读" class="headerlink" title="解读"></a>解读</h2><ul>
<li>在页面<code>pushScene</code>时将页面<code>node</code>设置为常驻节点并隐藏，并且将<code>node</code>存入栈<code>sceneStack</code>中。</li>
<li>当页面<code>popScene</code>时，在栈中取出栈顶元素，将栈顶元素取消常驻节点并设置显示，并且将当前页面销毁。</li>
<li>在<code>popScene</code>时适时调用<code>onShowFromStack</code>方法，用来模拟一个<code>onshow</code>方法</li>
</ul>
<h2 id="待开源"><a href="#待开源" class="headerlink" title="待开源"></a>待开源</h2>
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://blog.tabcen.top/2020/05/09/%E6%B8%B8%E6%88%8F/20200509-cocos%E5%B0%8F%E6%B8%B8%E6%88%8F%E5%BC%80%E5%8F%91%E7%B3%BB%E5%88%97%E4%B8%80/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="TabCen">
      <meta itemprop="description" content="今日而言治术，则莫若综合名实；今日而言学术，则莫若取笃实践履之士。物穷则变，救浮华者莫若质。积翫之后，振之以猛，意在斯乎！">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="TabCen's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/05/09/%E6%B8%B8%E6%88%8F/20200509-cocos%E5%B0%8F%E6%B8%B8%E6%88%8F%E5%BC%80%E5%8F%91%E7%B3%BB%E5%88%97%E4%B8%80/" class="post-title-link" itemprop="url">20200509-游戏开发框架搭建一</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-05-09 09:06:44" itemprop="dateCreated datePublished" datetime="2020-05-09T09:06:44+08:00">2020-05-09</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2021-04-21 21:14:12" itemprop="dateModified" datetime="2021-04-21T21:14:12+08:00">2021-04-21</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E6%B8%B8%E6%88%8F/" itemprop="url" rel="index"><span itemprop="name">游戏</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <blockquote>
<p>本篇文章介绍游戏开发过程中如果将游戏开发工程化，像开发app一样开发游戏</p>
</blockquote>
<h2 id="技术选型"><a href="#技术选型" class="headerlink" title="技术选型"></a>技术选型</h2><ul>
<li>TypeScript 语言</li>
<li>cocos 引擎</li>
<li>CocosCreator、VSCode 开发工具</li>
</ul>
<h2 id="项目结构"><a href="#项目结构" class="headerlink" title="项目结构"></a>项目结构</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;animations      -- 动画资源</span><br><span class="line">    &#x2F;animation_anim</span><br><span class="line">    &#x2F;animation_prefab</span><br><span class="line">    &#x2F;animation_texture</span><br><span class="line">&#x2F;base</span><br><span class="line">    BaseScene.ts</span><br><span class="line">    BasePrefab.ts</span><br><span class="line">&#x2F;components      -- 公用组件 预制体、脚本</span><br><span class="line">    &#x2F;popup</span><br><span class="line">        basePopup.ts</span><br><span class="line">        popup.prefab</span><br><span class="line">    &#x2F;other</span><br><span class="line">&#x2F;resources       -- loadRes 动态加载</span><br><span class="line">&#x2F;scene</span><br><span class="line">    &#x2F;MainScene</span><br><span class="line">        MainScene.fire</span><br><span class="line">        MainScene.ts</span><br><span class="line">&#x2F;static</span><br><span class="line">    &#x2F;images          -- 图片资源</span><br><span class="line">    &#x2F;media           -- 媒体资源</span><br><span class="line">&#x2F;utils           -- 工具类</span><br><span class="line">    common.js</span><br><span class="line">    globalFunction.js</span><br><span class="line">    md5.js</span><br><span class="line">    &#x2F;api</span><br><span class="line">        token.js</span><br><span class="line">        http.js</span><br></pre></td></tr></table></figure>
<p>着重讲一下，抽离基类 BaseScene.ts、BasePrefab.ts，将一些相关方法封装到BaseScene.ts中，其他的场景均继承自基类。这样做的好处</p>
<ul>
<li>代码更加洁简</li>
<li>增加可重构性</li>
</ul>
<p><strong>注意</strong><br>不建议封装功能特别大、多的基类。这样增加了基类的耦合性。可将同类方法抽离成接口。再在不同的类中进行继承。仅仅是为了去重而写基类是不合理的</p>
<h2 id="命名规范"><a href="#命名规范" class="headerlink" title="命名规范"></a>命名规范</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">资源    icon_btn_1.jpg  短横线</span><br><span class="line">预制体  popup_prefab.prefab</span><br><span class="line">场景    MainScene 大驼峰</span><br><span class="line">脚本    小驼峰</span><br><span class="line">变量    小驼峰  </span><br><span class="line">    let timeScope &#x3D; 242342</span><br><span class="line">    let _this &#x3D; this</span><br><span class="line">    let _scope &#x3D; scope</span><br></pre></td></tr></table></figure>

<h2 id="脚本规范"><a href="#脚本规范" class="headerlink" title="脚本规范"></a>脚本规范</h2><ul>
<li>添加<code>MARK</code>标记</li>
<li>冗余代码删除</li>
<li>缩进 两个空格</li>
<li>onClick***</li>
<li>function 单一职责：一个方法，一个功能，解耦</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F;&#x2F; MARK: 属性声明</span><br><span class="line">&#x2F;&#x2F;&#x2F; MARK: 生命周期函数</span><br><span class="line">&#x2F;&#x2F;&#x2F; MARK: 私有方法</span><br><span class="line">&#x2F;&#x2F;&#x2F; MARK: 网络请求</span><br><span class="line">    request_home()</span><br></pre></td></tr></table></figure>

<h2 id="感想"><a href="#感想" class="headerlink" title="感想"></a>感想</h2><p>虽未深入涉足游戏开发，但是感觉目前的游戏开发社区依然不够火热（可能是相较于其他开发领域）。游戏开发工程师可能在开发游戏的过程中忽略了游戏开发也属于一项软件工程。而软件工程架构设计和规范是值得思考的。游戏开发过程中不能仅仅关注游戏的界面。在这段时间使用cocoscreator开发小程序的过程中发现，大多数游戏开发工程师在进行游戏开发时，更多得使用可视化的拖控件功能。这种操作非常不够技术性。更加偏向于美工设计工作。我个人更加提倡游戏开发者应该将重点聚焦在逻辑实现和代码的架构方向。譬如，去了解MVC、去构建页面栈、多平台兼容等</p>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://blog.tabcen.top/2020/04/22/%E5%89%8D%E7%AB%AF/20200422-webpack-bundle-loader/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="TabCen">
      <meta itemprop="description" content="今日而言治术，则莫若综合名实；今日而言学术，则莫若取笃实践履之士。物穷则变，救浮华者莫若质。积翫之后，振之以猛，意在斯乎！">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="TabCen's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/04/22/%E5%89%8D%E7%AB%AF/20200422-webpack-bundle-loader/" class="post-title-link" itemprop="url">webpack打包解析二</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-04-22 09:47:38" itemprop="dateCreated datePublished" datetime="2020-04-22T09:47:38+08:00">2020-04-22</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2021-04-21 21:14:12" itemprop="dateModified" datetime="2021-04-21T21:14:12+08:00">2021-04-21</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <blockquote>
<p>目的：接上一文，本文解析 webpack打包带css-loader的bundle文件</p>
</blockquote>
<h2 id="一、准备"><a href="#一、准备" class="headerlink" title="一、准备"></a>一、准备</h2><ul>
<li><p>1、./src/main.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">&#x27;./main.css&#x27;</span>;</span><br><span class="line"><span class="keyword">let</span> div = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;div&#x27;</span>)</span><br><span class="line">div.classList.add(<span class="string">&#x27;test&#x27;</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;css-loader&#x27;</span>)</span><br></pre></td></tr></table></figure></li>
<li><p>2、./src/main.css</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.test</span>&#123;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">  <span class="attribute">background-color</span>: blue;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>3、webpack.config.js</p>
<ul>
<li><strong>注意在使用css-loader 时需要加载 <code>style-loader</code> 和 <code>css-loader</code>,且顺序不可写错</strong></li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  mode: <span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">  entry: &#123;</span><br><span class="line">    main: <span class="string">&#x27;./src/main.js&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  output: &#123;</span><br><span class="line">    filename: <span class="string">&#x27;[name].bundle.js&#x27;</span>,</span><br><span class="line">    path: path.resolve(__dirname,<span class="string">&#x27;dist&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.css$/</span>,</span><br><span class="line">        use: [</span><br><span class="line">          <span class="string">&#x27;style-loader&#x27;</span>,</span><br><span class="line">          <span class="string">&#x27;css-loader&#x27;</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><p>4、打包生成的文件<br><a href="./../code/loader/main.bundle.loader.js">main.bundle.js</a></p>
</li>
<li><p>5、打包后的文件是一个IIFE自执行函数表达式，根据上文解析。函数体部分作用就是递归加载参数模块。</p>
</li>
</ul>
<p>模块区分如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">   <span class="string">&quot;./node_modules/css-loader/dist/cjs.js!./src/main.css&quot;</span>:</span><br><span class="line">   (<span class="function"><span class="keyword">function</span>(<span class="params"><span class="built_in">module</span>, <span class="built_in">exports</span>, __webpack_require__</span>) </span>&#123;</span><br><span class="line">     <span class="built_in">eval</span>(<span class="string">&quot;// Imports...&quot;</span>);</span><br><span class="line">    &#125;),</span><br><span class="line">  </span><br><span class="line">  <span class="string">&quot;./node_modules/css-loader/dist/runtime/api.js&quot;</span>:</span><br><span class="line">  (<span class="function"><span class="keyword">function</span>(<span class="params"><span class="built_in">module</span>, <span class="built_in">exports</span>, __webpack_require__</span>) </span>&#123;</span><br><span class="line"><span class="meta">    &quot;use strict&quot;</span>;</span><br><span class="line">    <span class="built_in">eval</span>(<span class="string">&quot;//...&quot;</span>);</span><br><span class="line">  &#125;),</span><br><span class="line"></span><br><span class="line">  <span class="string">&quot;./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js&quot;</span>:</span><br><span class="line">  (<span class="function"><span class="keyword">function</span>(<span class="params"><span class="built_in">module</span>, <span class="built_in">exports</span>, __webpack_require__</span>) </span>&#123;</span><br><span class="line"><span class="meta">    &quot;use strict&quot;</span>;</span><br><span class="line">    <span class="built_in">eval</span>(<span class="string">&quot;//...&quot;</span>);</span><br><span class="line">  &#125;),</span><br><span class="line">  </span><br><span class="line">  <span class="string">&quot;./src/main.css&quot;</span>:</span><br><span class="line">  (<span class="function"><span class="keyword">function</span>(<span class="params"><span class="built_in">module</span>, <span class="built_in">exports</span>, __webpack_require__</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">eval</span>(<span class="string">&quot;//...&quot;</span>);</span><br><span class="line">  &#125;),</span><br><span class="line"></span><br><span class="line">  <span class="string">&quot;./src/main.js&quot;</span>:</span><br><span class="line">  (<span class="function"><span class="keyword">function</span>(<span class="params"><span class="built_in">module</span>, __webpack_exports__, __webpack_require__</span>) </span>&#123;</span><br><span class="line"><span class="meta">    &quot;use strict&quot;</span>;</span><br><span class="line">    <span class="built_in">eval</span>(<span class="string">&quot;//...&quot;</span>);</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>6、将webpack<strong>编译好</strong>的5个<strong>单模块字符串</strong>整理成5个js文件以方便分析<ul>
<li><a href="./../code/loader/css-loader.api.js">./node_modules/css-loader/dist/runtime/api.js</a></li>
<li><a href="./../code/loader/style-loader.injectStylesIntoStyleTag.js.js">./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js</a></li>
<li><a href="./../code/loader/main.js.js">main.js.js</a> webpack 编译完main.js后生成的js文件</li>
<li><a href="./../code/loader/main.css.js">main.css.js</a>  webpack 编译完main.css后生成的js文件</li>
<li><a href="./../code/loader/cjs.js.main.css.js">cjs.js!./src/main.css.js</a></li>
</ul>
</li>
</ul>
<h2 id="二、部分解读"><a href="#二、部分解读" class="headerlink" title="二、部分解读"></a>二、部分解读</h2><ul>
<li>2.1、css-loader 中的api.js</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="keyword">function</span> (<span class="params">useSourceMap</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> list = []; <span class="comment">// return the list of modules as css string</span></span><br><span class="line"></span><br><span class="line">  list.toString = <span class="function"><span class="keyword">function</span> <span class="title">toString</span>(<span class="params"></span>) </span>&#123;<span class="comment">//... 定义了一个toStirng方法 &#125;;</span></span><br><span class="line"></span><br><span class="line">  list.i = <span class="function"><span class="keyword">function</span> (<span class="params">modules, mediaQuery, dedupe</span>) </span>&#123;<span class="comment">//... 定义了一个i 方法 &#125;;</span></span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> list;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">//...</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cssWithMappingToString</span>(<span class="params">item, useSourceMap</span>)</span></span><br><span class="line"><span class="function"><span class="function"><span class="keyword">function</span> <span class="title">toComment</span>(<span class="params">sourceMap</span>)</span></span></span><br></pre></td></tr></table></figure>
<pre><code>- 不难发现css-loader 返回了一个空的数组 []. 且在这个数组方法上挂了几个方法
</code></pre>
<ul>
<li>2.2、cjs.js!./src/main.css.js</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ___CSS_LOADER_API_IMPORT___ = __webpack_require__(<span class="comment">/*! ../node_modules/css-loader/dist/runtime/api.js */</span> <span class="string">&quot;./node_modules/css-loader/dist/runtime/api.js&quot;</span>);</span><br><span class="line"><span class="built_in">exports</span> = ___CSS_LOADER_API_IMPORT___(<span class="literal">false</span>);</span><br><span class="line"><span class="comment">// Module</span></span><br><span class="line"><span class="built_in">exports</span>.push([<span class="built_in">module</span>.i, <span class="string">&quot;.test&#123;\</span></span><br><span class="line"><span class="string">  color: red;\</span></span><br><span class="line"><span class="string">  background-color: blue;\</span></span><br><span class="line"><span class="string">&#125;&quot;</span>, <span class="string">&quot;&quot;</span>]);</span><br><span class="line"><span class="comment">// Exports</span></span><br><span class="line"><span class="built_in">module</span>.exports = <span class="built_in">exports</span>;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<pre><code>- 得到了一个 [&quot;样式表名&quot;,&quot;样式字符串&quot;,&quot;&quot;] 这样的一个数据原（元组）
</code></pre>
<ul>
<li>2.3、main.css.js</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> api = __webpack_require__(<span class="comment">/*! ../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */</span> <span class="string">&quot;./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js&quot;</span>);</span><br><span class="line"><span class="keyword">var</span> content = __webpack_require__(<span class="comment">/*! !../node_modules/css-loader/dist/cjs.js!./main.css */</span> <span class="string">&quot;./node_modules/css-loader/dist/cjs.js!./src/main.css&quot;</span>);</span><br><span class="line"></span><br><span class="line">content = content.__esModule ? content.default : content;</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (<span class="keyword">typeof</span> content === <span class="string">&#x27;string&#x27;</span>) &#123;</span><br><span class="line">  content = [[<span class="built_in">module</span>.i, content, <span class="string">&#x27;&#x27;</span>]];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> options = &#123;&#125;;</span><br><span class="line"></span><br><span class="line">options.insert = <span class="string">&quot;head&quot;</span>;</span><br><span class="line">options.singleton = <span class="literal">false</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> update = api(content, options);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> exported = content.locals ? content.locals : &#123;&#125;;</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = exported;</span><br></pre></td></tr></table></figure>

<pre><code>- 不难发现 main.css.js 主要执行了的方法就是 api(content, options);
</code></pre>
<ul>
<li>2.4、injectStylesIntoStyleTag.js</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//...</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">modulesToDom</span>(<span class="params">list, options</span>) </span>&#123;</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line">      stylesInDom.push(&#123;</span><br><span class="line">        identifier: identifier,</span><br><span class="line">        updater: addStyle(obj, options),</span><br><span class="line">        references: <span class="number">1</span></span><br><span class="line">      &#125;);</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">  <span class="keyword">return</span> identifiers;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">insertStyleElement</span>(<span class="params">options</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> style = <span class="built_in">document</span>.createElement(<span class="string">&#x27;style&#x27;</span>);</span><br><span class="line">  <span class="comment">//...</span></span><br><span class="line"></span><br><span class="line">  <span class="built_in">Object</span>.keys(attributes).forEach(<span class="function"><span class="keyword">function</span> (<span class="params">key</span>) </span>&#123;</span><br><span class="line">    style.setAttribute(key, attributes[key]);</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="comment">//...</span></span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> style;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">addStyle</span>(<span class="params">obj, options</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">  style = insertStyleElement(options);</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="keyword">function</span> (<span class="params">list, options</span>) </span>&#123;</span><br><span class="line">  <span class="comment">//...</span></span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> lastIdentifiers = modulesToDom(list, options);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> <span class="title">update</span>(<span class="params">newList</span>) </span>&#123; <span class="comment">// ... &#125;;</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<pre><code>- 最终发现 通过injectStylesIntoStyleTag.js动态得生成style标签，再将.css中的样式挂载到style标签中
</code></pre>
<h2 id="三、总结"><a href="#三、总结" class="headerlink" title="三、总结"></a>三、总结</h2><ul>
<li><p>webpack 打包带css-loader、style-loader的脚本执行过程，是通过css-loader生成对应的css样式 <code>[&quot;样式表名&quot;,&quot;样式字符串&quot;,&quot;&quot;]</code> 数组。再通过 style-loader 挂载到 <code>&lt;style&gt;</code> 标签上。</p>
</li>
<li><p>此篇文章写得不伦不类。建议仔细分析打包后的bundle.js文件。本文仅做参考</p>
</li>
</ul>
<blockquote>
<p>在阅读代码过程中，我们得抽丝剥茧，专注于执行过程。对于阅读过程中遇到的定义部分先做忽略即可。等调用时再做思考。这样才能让我们更加专注</p>
</blockquote>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://blog.tabcen.top/2020/04/21/%E5%89%8D%E7%AB%AF/20200421-webpack-bundle-resolve/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="TabCen">
      <meta itemprop="description" content="今日而言治术，则莫若综合名实；今日而言学术，则莫若取笃实践履之士。物穷则变，救浮华者莫若质。积翫之后，振之以猛，意在斯乎！">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="TabCen's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/04/21/%E5%89%8D%E7%AB%AF/20200421-webpack-bundle-resolve/" class="post-title-link" itemprop="url">webpack打包解析一</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-04-21 11:02:45" itemprop="dateCreated datePublished" datetime="2020-04-21T11:02:45+08:00">2020-04-21</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2021-04-21 21:14:12" itemprop="dateModified" datetime="2021-04-21T21:14:12+08:00">2021-04-21</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <blockquote>
<p>目的：解析 webpack 打包出来的最简单的一个bundle.js脚本</p>
</blockquote>
<h2 id="一、准备"><a href="#一、准备" class="headerlink" title="一、准备"></a>一、准备</h2><ul>
<li><p>1、./src/main.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> test = <span class="built_in">require</span>(<span class="string">&#x27;./test&#x27;</span>);</span><br><span class="line">test()</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&quot;hellowebpack&quot;</span>)</span><br></pre></td></tr></table></figure></li>
<li><p>2、./src/test.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;log test&#x27;</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>3、webpack.config.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  mode: <span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">  entry: &#123;</span><br><span class="line">    main: <span class="string">&#x27;./src/main.js&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  output: &#123;</span><br><span class="line">    filename: <span class="string">&#x27;[name].bundle.js&#x27;</span>,</span><br><span class="line">    path: path.resolve(__dirname,<span class="string">&#x27;dist&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>4、打包生成的文件<br><a href="./../code/main.bundle.js">main.bundle.js</a></p>
</li>
</ul>
<h2 id="二、处理main-bundle-js"><a href="#二、处理main-bundle-js" class="headerlink" title="二、处理main.bundle.js"></a>二、处理main.bundle.js</h2><p><a href="./../code/main.bundle.resolve.js">main.bundle.js 简化处理的文件</a></p>
<h3 id="2-1、自执行函数表达式-IIFE"><a href="#2-1、自执行函数表达式-IIFE" class="headerlink" title="2.1、自执行函数表达式 IIFE"></a>2.1、自执行函数表达式 IIFE</h3><ul>
<li>不难发现整体js是一个自执行函数表达式IIFE  <code>(FUNCTION)(PARAMS);</code></li>
<li>IIFE 的函数体部分<code>（FUNCTION）</code> 内部定义了一个函数 <code>__webpack_require__</code>，返回的是执行<code>__webpack_require__(&quot;./src/main.js&quot;);</code>结果。</li>
<li>IIFE 的参数部分是一个 Map {key:value},key为路径，value为函数 <code>function(module,exports,__webpack_require__)&#123;&#125;</code>，函数执行 eval(“string”)</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params">modules</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// The module cache</span></span><br><span class="line">  <span class="keyword">var</span> installedModules = &#123;&#125;;</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">__webpack_require__</span>(<span class="params">moduleId</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// Create a new module (and put it into the cache)</span></span><br><span class="line">    <span class="keyword">var</span> <span class="built_in">module</span> = installedModules[moduleId] = &#123;</span><br><span class="line">      i: moduleId,</span><br><span class="line">      l: <span class="literal">false</span>,</span><br><span class="line">      <span class="built_in">exports</span>: &#123;&#125;</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="comment">// 步骤一</span></span><br><span class="line">    modules[moduleId].call(<span class="built_in">module</span>.exports, <span class="built_in">module</span>, <span class="built_in">module</span>.exports, __webpack_require__);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// Return the exports of the module</span></span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">module</span>.exports;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">  <span class="keyword">return</span> __webpack_require__(__webpack_require__.s = <span class="string">&quot;./src/main.js&quot;</span>);</span><br><span class="line">&#125;)(&#123;</span><br><span class="line">  <span class="string">&quot;./src/main.js&quot;</span>:</span><br><span class="line">  (<span class="function"><span class="keyword">function</span>(<span class="params"><span class="built_in">module</span>, <span class="built_in">exports</span>, __webpack_require__</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">eval</span>(<span class="string">&quot;const test = __webpack_require__(/*! ./test */ \&quot;./src/test.js\&quot;);\n\ntest()\n\nconsole.log(\&quot;hellowebpack\&quot;)\n\n\n//# sourceURL=webpack:///./src/main.js?&quot;</span>);</span><br><span class="line">  &#125;),</span><br><span class="line">  <span class="string">&quot;./src/test.js&quot;</span>:</span><br><span class="line">  (<span class="function"><span class="keyword">function</span>(<span class="params"><span class="built_in">module</span>, <span class="built_in">exports</span></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">eval</span>(<span class="string">&quot;module.exports = function()&#123;\n  console.log(&#x27;log test&#x27;)\n&#125;\n\n//# sourceURL=webpack:///./src/test.js?&quot;</span>);</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h3 id="2-2、IIFE的执行"><a href="#2-2、IIFE的执行" class="headerlink" title="2.2、IIFE的执行"></a>2.2、IIFE的执行</h3><ul>
<li>先定义 <code>installedModules</code> 用来存储加载成功的模块</li>
<li>定义内部函数 <code>function __webpack_require__(moduleId)&#123;&#125;</code></li>
<li>触发内部函数 <code>__webpack_require__(__webpack_require__.s = &quot;./src/main.js&quot;);</code> 此处传入的参数即为 配置中的entry 入口路径</li>
<li><code>__webpack_require__(&quot;./src/main.js&quot;)</code> 直至运行到 <code>步骤一</code></li>
</ul>
<h3 id="2-3、Function-prototype-call-执行加载模块"><a href="#2-3、Function-prototype-call-执行加载模块" class="headerlink" title="2.3、Function.prototype.call() 执行加载模块"></a>2.3、<a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">Function.prototype.call()</a> 执行加载模块</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">modules[moduleId].call(<span class="built_in">module</span>.exports, <span class="built_in">module</span>, <span class="built_in">module</span>.exports, __webpack_require__);</span><br></pre></td></tr></table></figure>

<ul>
<li>此时开始真正的加载模块, 获取 自执行函数参数（PARAMS）的 ‘./src/main.js’ 模块。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"><span class="built_in">module</span>, <span class="built_in">exports</span>, __webpack_require__</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">eval</span>(<span class="string">&quot;const test = __webpack_require__(/*! ./test */ \&quot;./src/test.js\&quot;);\n\ntest()\n\nconsole.log(\&quot;hellowebpack\&quot;)\n\n# sourceURL=webpack:///./src/main.js?&quot;</span>);</span><br><span class="line">  &#125;).call(<span class="built_in">module</span>.exports, <span class="built_in">module</span>, <span class="built_in">module</span>.exports, __webpack_require__);</span><br></pre></td></tr></table></figure>

<ul>
<li>加载过程中 使用 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval(str)</a> 函数执行webpack<strong>编译好</strong>的<strong>单模块字符串</strong></li>
<li>webpack 在编译js文件时遇到依赖模块，会将依赖方法替换成 <code>__webpack_require__</code> 函数。如 <code>const test = __webpack_require__(/*! ./test */ \&quot;./src/test.js\&quot;);</code></li>
<li>eval()在执行过程，再递归调用 <code>__webpack_require__</code> 函数来加载对应的依赖模块</li>
</ul>
<h3 id="2-4、递归调用-webpack-require-quot-src-test-js-quot"><a href="#2-4、递归调用-webpack-require-quot-src-test-js-quot" class="headerlink" title="2.4、递归调用 __webpack_require__(&quot;./src/test.js&quot;)"></a>2.4、递归调用 <code>__webpack_require__(&quot;./src/test.js&quot;)</code></h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"><span class="built_in">module</span>, <span class="built_in">exports</span></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">eval</span>(<span class="string">&quot;module.exports = function()&#123;\n  console.log(&#x27;log test&#x27;)\n&#125;\n\n//# sourceURL=webpack:///./src/test.js?&quot;</span>);</span><br><span class="line">  &#125;).call(<span class="built_in">module</span>.exports, <span class="built_in">module</span>, <span class="built_in">module</span>.exports, __webpack_require__);</span><br></pre></td></tr></table></figure>

<ul>
<li>将 test.js 中的 exports 挂载到 module.exports中。完成函数调用</li>
<li>递归的<code>__webpack_require__</code>函数调用。执行了模块代码.且将模块加载结果保存到 installedModules 中。如上执行结果，installedModules 结果如下</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">installedModules = &#123;</span><br><span class="line">  <span class="string">&quot;./src/main.js&quot;</span>:&#123;</span><br><span class="line">    i: <span class="string">&quot;./src/main.js&quot;</span>,</span><br><span class="line">    l: <span class="literal">true</span>,</span><br><span class="line">    <span class="built_in">exports</span>: &#123;&#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">&quot;./src/test.js&quot;</span>:&#123;</span><br><span class="line">    i: <span class="string">&quot;./src/test.js&quot;</span>,</span><br><span class="line">    l: <span class="literal">true</span>,</span><br><span class="line">    <span class="built_in">exports</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;<span class="built_in">console</span>.log(<span class="string">&#x27;log test&#x27;</span>)&#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="三、总结"><a href="#三、总结" class="headerlink" title="三、总结"></a>三、总结</h2><ul>
<li>本文解析的是webpack打包完成的bundle.js。讲的是webpack的<code>执行流程</code>而非<code>编译过程</code>。</li>
<li>IIFE中的函数体部分<code>(FUNCTION)</code>目的是递归的加载<code>(PARAMS)</code>中的模块代码</li>
</ul>
<blockquote>
<p>下一篇：分析 带loader的 webpack打包出来的bundle.js脚本</p>
</blockquote>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://blog.tabcen.top/2019/11/23/%E6%84%9F%E6%83%B3/20191123-%E9%9D%A0%E8%B0%B1/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="TabCen">
      <meta itemprop="description" content="今日而言治术，则莫若综合名实；今日而言学术，则莫若取笃实践履之士。物穷则变，救浮华者莫若质。积翫之后，振之以猛，意在斯乎！">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="TabCen's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2019/11/23/%E6%84%9F%E6%83%B3/20191123-%E9%9D%A0%E8%B0%B1/" class="post-title-link" itemprop="url">如何变成靠谱的人?</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2019-11-23 14:56:01" itemprop="dateCreated datePublished" datetime="2019-11-23T14:56:01+08:00">2019-11-23</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2021-04-21 21:14:12" itemprop="dateModified" datetime="2021-04-21T21:14:12+08:00">2021-04-21</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E6%84%9F%E6%83%B3/" itemprop="url" rel="index"><span itemprop="name">感想</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h2 id="一个靠谱的人应该具有什么特质？"><a href="#一个靠谱的人应该具有什么特质？" class="headerlink" title="一个靠谱的人应该具有什么特质？"></a>一个靠谱的人应该具有什么特质？</h2><h3 id="1、工作有态度"><a href="#1、工作有态度" class="headerlink" title="1、工作有态度"></a>1、工作有态度</h3><ul>
<li>给人确定性</li>
<li>提高做事标准，不满足现状</li>
</ul>
<h3 id="2、能力超预期"><a href="#2、能力超预期" class="headerlink" title="2、能力超预期"></a>2、能力超预期</h3><ul>
<li>专业</li>
</ul>
<h3 id="3、做事有结果"><a href="#3、做事有结果" class="headerlink" title="3、做事有结果"></a>3、做事有结果</h3><ul>
<li>做事有结果，有反馈，</li>
<li>敢于担当</li>
</ul>
<h2 id="感想"><a href="#感想" class="headerlink" title="感想"></a>感想</h2><p>其实就是做事情的三个阶段：** 做事前 – 做事中 – 做事后 **</p>
<p>做事前，能给人确定性，这个确定性不仅仅告诉人这个方案可以实现，而是能让人放心你可以做好它；你得有一个自己的做事标准。而这个标准是需要不断去提高的。</p>
<p>做事中，你得有专业的技术，精湛的技能总能赢得一片喝彩。</p>
<p>做事后，做事情得有结果，有始还得有终。当然你得有担当。而真正做到这却不是很简单</p>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://blog.tabcen.top/2019/03/31/%E6%84%9F%E6%83%B3/20190331-2019%E5%B9%B43%E6%9C%88%E4%BB%BD%E6%80%BB%E7%BB%93/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="TabCen">
      <meta itemprop="description" content="今日而言治术，则莫若综合名实；今日而言学术，则莫若取笃实践履之士。物穷则变，救浮华者莫若质。积翫之后，振之以猛，意在斯乎！">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="TabCen's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2019/03/31/%E6%84%9F%E6%83%B3/20190331-2019%E5%B9%B43%E6%9C%88%E4%BB%BD%E6%80%BB%E7%BB%93/" class="post-title-link" itemprop="url">2019年3月份总结</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2019-03-31 20:48:54" itemprop="dateCreated datePublished" datetime="2019-03-31T20:48:54+08:00">2019-03-31</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2021-04-21 21:14:12" itemprop="dateModified" datetime="2021-04-21T21:14:12+08:00">2021-04-21</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E6%84%9F%E6%83%B3/" itemprop="url" rel="index"><span itemprop="name">感想</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="2019年3月份总结"><a href="#2019年3月份总结" class="headerlink" title="2019年3月份总结"></a>2019年3月份总结</h1><h2 id="1、工作上"><a href="#1、工作上" class="headerlink" title="1、工作上"></a>1、工作上</h2><p>经过了1个月的疯狂加班，终于将天天领鸡蛋项目编码完成，并且基本测试完成。但是对于我来说这个任务并没有完全完成好。原因有：</p>
<ul>
<li>1、在项目开始阶段没有定位自己的角色。在目前这个阶段我们三个开发均属于“半吊子”。而此时作为领导的三郎是希望将我定位为技术主要负责人。而我却并没有做好如此的准备。这导致了项目开始阶段我决意采用小游戏的方案来实现。但是最终踩坑。</li>
<li>2、没有抓住问题的重点。我们的项目的目的并不是养一只小鸡。正在的本质目标是培养用户的做任务的习惯。而做任务才是我们能带来利益的关键。故，应该把事务的本质抓住。项目开始时立刻验证功能逻辑是否走得通。这样在技术选项时即可将问题找到，避免了后面的弯路。</li>
<li>3、于团队合作层面来说，这次团队合作并不正常。项目一开始，整体开发人员中只有我一人处于针对项目工作。其余人员处于“自我提升”中。在两个星期后才开始正式得进入开发状态中，后才发现问题所在。这也是本次ORK没有完成的一个主要原因。</li>
</ul>
<h2 id="2、心态上"><a href="#2、心态上" class="headerlink" title="2、心态上"></a>2、心态上</h2><p>2019年始，工作了4年。从上海转杭州也已经工作满两年。一直从事iOS开发工作。对于iOS开发的技能提升的确在每一年都有很大的提升。但是我现在依然觉得只是认知上的提升。2018年我尝试了RAC、Swift、RxSwift、组件化、OpenCV等等。但是却属于一知半解。这种效果并不是我现在想看到的。于我来说并没有益处。2018年低，公司大裁员。在急缺前端开发的时候裁掉了仅有的两位前端开发人员。转让我、小海、志豪三个客户端开发人员来做前端小程序开发。一开始是很可以接受的。心理想着有机会可以做小程序了，挺有意思的。但是后来我渐渐感觉小程序、前端市场的确火爆，而iOS行业并不景气。这让我心态确实波动不少。现在围绕着我的是如何高薪转做其他技术行业。这是一种对iOS行业丧失信心，对其他行业缺乏自信的感觉。</p>
<h2 id="3、规划"><a href="#3、规划" class="headerlink" title="3、规划"></a>3、规划</h2><p>今年必须在工资上有新的突破，2019年跳槽目标必须在20k以上。但是我由于3月份疯狂加班丧失了太多的复习时间。4月份必须认真复习。而此时的复习目标是现在必须定下来的。欠下的知识点必须一点一滴全部还上。那么接下来4月份的规划是如何呢：</p>
<ul>
<li>1、本着技术是一门精通，其他广阔涉猎的原则。不能丧失老本行，iOS技术必须扎实得打牢。</li>
<li>2、前端技术在工作中认真学习不断提升前端技术的认知。</li>
<li>3、java的学习先缓一缓。今年的目标达成即可。但是在4月份必须抽出时间对目前学习的java技术进行总结和回顾，防止发生遗忘的现象。</li>
</ul>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://blog.tabcen.top/2019/03/27/iOS/20190327-iOS%E7%9F%A5%E8%AF%86%E7%82%B9%E5%A4%87%E5%BF%98/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="TabCen">
      <meta itemprop="description" content="今日而言治术，则莫若综合名实；今日而言学术，则莫若取笃实践履之士。物穷则变，救浮华者莫若质。积翫之后，振之以猛，意在斯乎！">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="TabCen's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2019/03/27/iOS/20190327-iOS%E7%9F%A5%E8%AF%86%E7%82%B9%E5%A4%87%E5%BF%98/" class="post-title-link" itemprop="url">iOS知识点备忘</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2019-03-27 22:47:14" itemprop="dateCreated datePublished" datetime="2019-03-27T22:47:14+08:00">2019-03-27</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2021-04-21 21:14:12" itemprop="dateModified" datetime="2021-04-21T21:14:12+08:00">2021-04-21</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/iOS/" itemprop="url" rel="index"><span itemprop="name">iOS</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h3 id="软件基础"><a href="#软件基础" class="headerlink" title="软件基础"></a>软件基础</h3><h4 id="数据结构-amp-算法"><a href="#数据结构-amp-算法" class="headerlink" title="数据结构 &amp; 算法"></a>数据结构 &amp; 算法</h4><!-- - [ ] 基本的算法和数据结构（排序搜索算法, 数组, 队列）
- [ ] 较复杂数据结构的灵活应用（二叉树, 图等）
- [ ] 复杂的专项算法 -->

<h4 id="网络相关"><a href="#网络相关" class="headerlink" title="网络相关"></a>网络相关</h4><ul>
<li><input disabled="" type="checkbox"> Http</li>
</ul>
<h3 id="iOS"><a href="#iOS" class="headerlink" title="iOS"></a>iOS</h3><h4 id="Objective-C、Swift"><a href="#Objective-C、Swift" class="headerlink" title="Objective-C、Swift"></a>Objective-C、Swift</h4><ul>
<li><p><input disabled="" type="checkbox">  Objective-C</p>
<ul>
<li><input disabled="" type="checkbox"> 内存管理</li>
<li><input disabled="" type="checkbox"> Block的理解和使用</li>
<li><input disabled="" type="checkbox"> 多线程</li>
<li><input disabled="" type="checkbox"> iOS多线程编程（Thread,GCD,NSOperation）</li>
<li><input disabled="" type="checkbox"> OC对象的本质</li>
<li><input disabled="" type="checkbox"> KVO探索实践</li>
<li><input disabled="" type="checkbox"> runtime理解和使用</li>
<li><input disabled="" type="checkbox"> runloop理解和使用</li>
<li><input disabled="" type="checkbox"> 消息转发机制</li>
<li><input disabled="" type="checkbox"> AOP切片编程（Aspects）</li>
<li><input disabled="" type="checkbox"> 自动释放池 @autoreleasepool</li>
</ul>
</li>
<li><p><input disabled="" type="checkbox">  Swift</p>
<ul>
<li><input disabled="" type="checkbox"> iOS多线程编程（GCD）</li>
</ul>
</li>
</ul>
<h4 id="操作系统"><a href="#操作系统" class="headerlink" title="操作系统"></a>操作系统</h4><ul>
<li><input disabled="" type="checkbox"> iOS内存管理和调优</li>
<li><input disabled="" type="checkbox"> iOS的文件系统和沙盒机制</li>
<li><input disabled="" type="checkbox"> iOS系统的各种安全机制</li>
<li><input disabled="" type="checkbox"> library,framework的制作</li>
<li><input disabled="" type="checkbox"> LLVM 原理和调优</li>
<li><input disabled="" type="checkbox"> LLVM、GCC、GNU和Clang对比</li>
</ul>
<h4 id="网络编程"><a href="#网络编程" class="headerlink" title="网络编程"></a>网络编程</h4><ul>
<li><input disabled="" type="checkbox"> iOS网络和服务器编程（NSURLConnection,NSURLSession）</li>
<li><input disabled="" type="checkbox"> iOS网络发送机制调整和优化（NSURLSession）</li>
<li><input disabled="" type="checkbox"> Socket编程</li>
<li><input disabled="" type="checkbox"> 网络传输中的各种保障</li>
<li><input disabled="" type="checkbox"> 对传输协议的调整优化</li>
</ul>
<h4 id="数据库-amp-持久化方案"><a href="#数据库-amp-持久化方案" class="headerlink" title="数据库&amp;持久化方案"></a>数据库&amp;持久化方案</h4><ul>
<li><input disabled="" type="checkbox"> 常规持久化方案（Keychain,NSUserDefaults,Sqlite,CoreData）</li>
<li><input disabled="" type="checkbox"> 数据库的使用和设计（Sqlite）</li>
<li><input disabled="" type="checkbox"> 数据结构优化，Sql调优</li>
</ul>
<h4 id="图形图像编程"><a href="#图形图像编程" class="headerlink" title="图形图像编程"></a>图形图像编程</h4><ul>
<li><input disabled="" type="checkbox"> UIKit,Core Animation和Core Text的绘制</li>
<li><input disabled="" type="checkbox"> Core Graphics, Quartz 2D, Media Player, AV Foundation</li>
<li><input disabled="" type="checkbox"> OpenGL ES, GLKit, SpriteKit, SceneKit, Metal</li>
</ul>
<h4 id="iOS的安全机制"><a href="#iOS的安全机制" class="headerlink" title="iOS的安全机制"></a><a target="_blank" rel="noopener" href="https://www.jianshu.com/p/6c70565b2c1f">iOS的安全机制</a></h4><ul>
<li><input disabled="" type="checkbox"> 本地数据存储安全（Keychain）</li>
<li><input disabled="" type="checkbox"> 授权和身份验证</li>
<li><input disabled="" type="checkbox"> 传输安全（对称, 非对称, SSL）</li>
<li><input disabled="" type="checkbox"> App代码安全</li>
<li><input disabled="" type="checkbox"> 代码签名机制</li>
<li><input disabled="" type="checkbox"> DEP</li>
<li><input disabled="" type="checkbox"> ASLP</li>
</ul>
<h4 id="Hybrid-编程"><a href="#Hybrid-编程" class="headerlink" title="Hybrid 编程"></a>Hybrid 编程</h4><ul>
<li><input disabled="" type="checkbox"> WkWebView开发</li>
<li><input disabled="" type="checkbox"> 前端-iOS通讯机制</li>
</ul>
<h4 id="组件化"><a href="#组件化" class="headerlink" title="组件化"></a>组件化</h4><ul>
<li><input disabled="" type="checkbox"> 路由到中间件的转变</li>
<li><input disabled="" type="checkbox"> 组件化模块划分方法</li>
<li><input disabled="" type="checkbox"> pod管理组件化</li>
</ul>
<h4 id="RxSwift链式响应式编程、RAC"><a href="#RxSwift链式响应式编程、RAC" class="headerlink" title="RxSwift链式响应式编程、RAC"></a>RxSwift链式响应式编程、RAC</h4><ul>
<li><input disabled="" type="checkbox"> RxSwift的简单使用</li>
<li><input disabled="" type="checkbox"> MVVM架构</li>
</ul>
<h4 id="第三方库使用"><a href="#第三方库使用" class="headerlink" title="第三方库使用"></a>第三方库使用</h4><ul>
<li><input disabled="" type="checkbox"> Texture<ul>
<li><input disabled="" type="checkbox"> App性能提升方案</li>
</ul>
</li>
</ul>
<h4 id="业务能力"><a href="#业务能力" class="headerlink" title="业务能力"></a>业务能力</h4><ul>
<li><input disabled="" type="checkbox"> 一般性业务功能需求分析及实现</li>
<li><input disabled="" type="checkbox"> 重要业务模块的需求分析及实现</li>
<li><input disabled="" type="checkbox"> 中小规模产品的架构，系统设计和实现</li>
<li><input disabled="" type="checkbox"> 大规模产品或产品线的架构，系统设计和实现</li>
<li><input disabled="" type="checkbox"> 平台级产品的架构，系统设计和实现</li>
</ul>
<h3 id="OpenCV图像识别技术"><a href="#OpenCV图像识别技术" class="headerlink" title="OpenCV图像识别技术"></a>OpenCV图像识别技术</h3><ul>
<li>图像边缘检测</li>
</ul>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://blog.tabcen.top/2019/02/19/java/20190219-String%E5%AF%B9%E6%AF%94/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="TabCen">
      <meta itemprop="description" content="今日而言治术，则莫若综合名实；今日而言学术，则莫若取笃实践履之士。物穷则变，救浮华者莫若质。积翫之后，振之以猛，意在斯乎！">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="TabCen's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2019/02/19/java/20190219-String%E5%AF%B9%E6%AF%94/" class="post-title-link" itemprop="url">String对比</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2019-02-19 18:03:51" itemprop="dateCreated datePublished" datetime="2019-02-19T18:03:51+08:00">2019-02-19</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2021-04-21 21:14:12" itemprop="dateModified" datetime="2021-04-21T21:14:12+08:00">2021-04-21</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/java/" itemprop="url" rel="index"><span itemprop="name">java</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <blockquote>
<p>在java中String.class equals方法的源码 </p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">@Override public boolean equals(Object other) &#123;</span><br><span class="line">    &#x2F;&#x2F;&#x2F; 1、 先判断地址是否相同 </span><br><span class="line">    if (other &#x3D;&#x3D; this) &#123;</span><br><span class="line">      return true;</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F;&#x2F; 2、判断对比对象是否是字符串</span><br><span class="line">    if (other instanceof String) &#123;</span><br><span class="line">        String s &#x3D; (String)other;</span><br><span class="line">        int count &#x3D; this.count;</span><br><span class="line"></span><br><span class="line">        &#x2F;&#x2F;&#x2F; 3、判断长度</span><br><span class="line">        if (s.count !&#x3D; count) &#123;</span><br><span class="line">            return false;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        &#x2F;&#x2F;&#x2F; 4、判断hash值是否相同</span><br><span class="line">        if (hashCode() !&#x3D; s.hashCode()) &#123;</span><br><span class="line">            return false;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        &#x2F;&#x2F;&#x2F; 5、一个字符串一个字符串对比</span><br><span class="line">        for (int i &#x3D; 0; i &lt; count; ++i) &#123;</span><br><span class="line">            if (charAt(i) !&#x3D; s.charAt(i)) &#123;</span><br><span class="line">                return false;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        return true;</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">        return false;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




  <nav class="pagination">
    <span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="extend next" rel="next" href="/page/2/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
  </nav>


<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      const activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      const commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>
</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">TabCen</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/pisces/" class="theme-link" rel="noopener" target="_blank">NexT.Pisces</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
<script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script>

  
<script src="/js/local-search.js"></script>






  





</body>
</html>
